﻿@{
    ViewBag.Title = "Manage";
    Layout = "~/Views/Shared/_CpanelLayout.cshtml";
}

<link rel="stylesheet" href="@Url.Content("~/Content/jqwidgets/styles/jqx.base.css")" type="text/css" />
    <script type="text/javascript" src="@Url.Content("~/Content/jqwidgets/jqxcore.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/jqwidgets/jqxdata.js")"></script> 
    <script type="text/javascript" src="@Url.Content("~/Content/jqwidgets/jqxbuttons.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/jqwidgets/jqxscrollbar.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/jqwidgets/jqxmenu.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/jqwidgets/jqxcheckbox.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/jqwidgets/jqxlistbox.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/jqwidgets/jqxdropdownlist.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/jqwidgets/jqxgrid.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/jqwidgets/jqxgrid.sort.js")"></script> 
    <script type="text/javascript" src="@Url.Content("~/Content/jqwidgets/jqxgrid.pager.js")"></script> 
    <script type="text/javascript" src="@Url.Content("~/Content/jqwidgets/jqxgrid.selection.js")"></script> 
    <script type="text/javascript" src="@Url.Content("~/Content/jqwidgets/jqxgrid.edit.js")"></script> 
<script type="text/javascript">
        $(document).ready(function () {
           
            var url = "@Url.Action("GetJCompanyList","Company")";
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'CompanyID', type: 'int' },
                    { name: 'LangID', type: 'string' },
                    { name: 'CompanyName', type: 'string' },
                    { name: 'Email', type: 'string' },
                    { name: 'Phone', type: 'string' },
                    { name: 'Logo', type: 'string' },
                    { name: 'Address', type: 'string' },
                                        { name: 'Enable', type: 'bool' }
                ],
                id: 'CompanyID',
                url: url
            };
           
            var imagerenderer = function (row, datafield, value) {
                return '<img style="margin:10px;10px;10px;10px;" height="50" width="100" src="/content/images/CompanyLogo/' + value + '"/>';
            }
            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: "100%",
                rowsheight:100,
                source: dataAdapter,
                pageable: true,
                autoheight: true,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                editable: true,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                  { text: 'ID', datafield: 'CompanyID', width: 30 },
                  
                  { text: 'Tên Cty', datafield: 'CompanyName', width:140 },
                  { text: 'Logo', datafield: 'Logo', width: 120, cellsrenderer: imagerenderer, height: 100 },
                   { text: 'Bật/tắt', datafield: 'Enable', columntype: 'checkbox', width: 100 },
                   { text: 'Điện thoại', datafield: 'Phone', width: 100 },
                    { text: 'Email', datafield: 'Email', width: 170 },
            
             
                  {
                     text: 'Chỉnh sửa', datafield: 'Edit', columntype: 'button', width: 100, cellsrenderer: function () {
                         return "Edit";
                     }, buttonclick: function (editrow) {

                         var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
                         window.location = "@Url.Action("EditCompany","Company")/" + dataRecord.CompanyID;
                     }
                  },
                  {
                      text: 'Xóa', datafield: 'Xóa', columntype: 'button', width: 100, cellsrenderer: function () {
                          return "Xóa";
                      }, buttonclick: function (editrow) {

                          var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
                          var rr = confirm("Bạn có muốn xóa Cty này không? \"" + dataRecord.CompanyName + "\" ?");
                          if (rr) {
                              $.ajax({
                                  type: "post",
                                  url: "@Url.Action("DeleteCompanyByID","Company")",
                                  data: { CompanyID: dataRecord.CompanyID },
                                  datatype: "json",
                                  success: function (rvdata) {
                                      if (rvdata.success) {
                                          $("#jqxgrid").jqxGrid({ source: dataAdapter });
                                      }
                                      else {
                                          alert(rvdata.msg);
                                      }
                                  }

                              });
                          }//end rr

                      }
                  }
                ]                
            });
        });
    </script>
<div class="container" style="padding:10px;">
    <fieldset>
                 <legend >Quản lý Công ty</legend>
   </fieldset>
   <div id="jqxgrid" class="container">

   </div>
</div>

